<template>
  <el-form
    :model="formData"
    :rules="formRules"
    label-width="120px"
    label-position="right"
    style="max-width: 600px; margin: 20px"
  >
    <!-- 基础信息部分 -->
    <el-form-item label="账号" prop="account">
      <el-input
        v-model="formData.account"
        placeholder="请输入"
        clearable
        readonly
      />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        v-model="formData.password"
        type="password"
        placeholder="请输入"
        show-password
        disabled
      />
    </el-form-item>

    <!-- 公司信息部分 -->
    <el-form-item label="货代公司名称" prop="companyName">
      <el-input v-model="formData.companyName" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="联系人" prop="contact">
      <el-input v-model="formData.contact" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="联系电话" prop="contactTel">
      <el-input v-model="formData.contactTel" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData.email" placeholder="请输入" />
    </el-form-item>

    <!-- 运输方式选择 -->
    <el-form-item label="运输方式" prop="shipMethod">
      <el-select
        v-model="formData.shipMethod"
        placeholder="请选择"
        style="width: 100%"
      >
        <el-option
          v-for="item in transportOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!-- 擅长航线选择 -->
    <el-form-item label="擅长航线" prop="shipRoute">
      <el-select
        v-model="formData.shipRoute"
        placeholder="请选择"
        style="width: 100%"
      >
        <el-option label="内贸" value="1" />
        <el-option label="外贸" value="2" />
      </el-select>
    </el-form-item>

    <!-- 操作按钮 -->
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { updateForward, queryById } from "@/api/forward/forward.js";
import { useRoute, useRouter } from "vue-router";
import { onMounted } from "vue";
const router = useRouter();
const route = useRoute();

const formData = ref({
  account: "",
  password: "",
  companyName: "",
  contact: "",
  contactTel: "",
  email: "",
  shipMethod: "",
  shipRoute: ""
});

const transportOptions = [
  { label: "海运", value: "1" },
  { label: "铁路", value: "2" },
  { label: "公路", value: "3" },
  { label: "空运", value: "4" },
  { label: "多联式", value: "5" },
  { label: "散货", value: "6" }
];

const formRules = {
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度至少6位", trigger: "blur" }
  ],
  companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  contactTel: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" }
  ],
  email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }]
};
//对应id货代信息
async function getForward(id) {
  let res = await queryById(id);
  console.log(res);
  if (res.code == 200) {
    formData.value = res.data;
  }
}

async function update() {
  let res = await updateForward(formData.value);
  if (res.code == 200) {
    router.push("/forward/list");
    ElMessage({
      message: "修改成功",
      type: "success"
    });
  } else {
    ElMessage({
      message: "修改失败，请检查修改信息",
      type: "error"
    });
  }
}

const handleSubmit = () => {
  // 表单提交逻辑
  console.log("提交数据：", formData);
  // 提交成功后跳转到列表页面
  update();
};

const handleCancel = () => {
  // 重置表单
  Object.keys(formData).forEach(key => {
    formData[key] = "";
  });
  // 取消后跳转到列表页面
  router.push("/forward/list");
};
onMounted(() => {
  let id = route.query.id;
  getForward(id);
});
</script>
